<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html>
<head>
    <meta charset="utf-8">
    <title>教师管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" th:href="@{/static/layuiadmin/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/layuiadmin/style/admin.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/layuiadmin/style/template.css}" media="all">
</head>
<body>

<div class="layui-fluid">
    <div class="layui-card">
        <!-- 搜索条件开始 -->
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">教工号</label>
                    <div class="layui-input-inline">
                        <input type="text" name="jobNumber" id="jobNumber" placeholder="请输入" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">姓名</label>
                    <div class="layui-input-inline">
                        <input type="text" name="name" id="name" placeholder="请输入" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="teacher-search">
                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                    </button>
                </div>
            </div>
        </div>
        <!-- 搜索条件结束 -->

        <div class="layui-card-body">
            <!--            <div style="padding-bottom: 10px;">-->
            <!--                <button class="layui-btn layuiadmin-btn-list" data-type="batchdel">删除</button>-->
            <!--                <button class="layui-btn layuiadmin-btn-list" data-type="add">添加</button>-->
            <!--            </div>-->
            <div style="display: none" id="datastructureToolBar">
                <button class="layui-btn layuiadmin-btn-admin" data-type="add">添加</button>
<!--                <button class="layui-btn layuiadmin-btn-admin" data-type="batchDelete">批量删除</button>-->
            </div>
            <!--表单主体部分-->
            <table id="studentInfoList" lay-filter="studentInfo">

            </table>

            <div id="TeacherTableBar" style="display: none;">
                <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </div>

            <script type="text/html" id="table-content-list">
                <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i
                        class="layui-icon layui-icon-edit"></i>编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i
                        class="layui-icon layui-icon-delete"></i>删除</a>
            </script>


            <script type="text/html" id="buttonTpl">
                {{#  if(d.status){ }}
                <button class="layui-btn layui-btn-xs">已发布</button>
                {{#  } else { }}
                <button class="layui-btn layui-btn-primary layui-btn-xs">待修改</button>
                {{#  } }}
            </script>
        </div>
    </div>
</div>

<script th:src="@{/static/layuiadmin/layui/layui.js}"></script>
<script>
    layui.config({
        base: '/static/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'contlist', 'table', 'laypage', 'upload', 'layer', 'laydate', 'jquery', 'form'], function () {
        let $ = layui.$;
        var table = layui.table
            , form = layui.form
            , upload = layui.upload
            , layer = layui.layer;

        var laypage = layui.laypage;

        //方法级渲染
        table.render({
            elem: '#studentInfoList'
            , id: 'studentInfoList'
            , url: '/back/queryTer'
            , title: '班级通知列表'
            , toolbar: '#datastructureToolBar'
            , cellMinWidth: 200
            , page: true
            , limit: 7
            , height: 'full-221'
            , cols: [
                [
                    {checkbox: true, fixed: true}
                    , {type: 'id', field: 'num', title: '教工号', width: 200, fixed: 'left', align: "center"}
                    , {field: 'name', title: '姓名', width: 200, align: 'center'}
                    , {field: 'phone', title: '电话', width: 200, align: 'center'}
                    , {title: '操作', toolbar: '#table-content-list', width: 260, align: 'center'}
                ]
            ]
            , parseData: function (res) {
                return {
                    "code": 0,
                    "msg": res.msg,
                    "data": res.payload.content,
                    "count": res.payload.total
                }
            }

        });

        $ = layui.$;
        let active = {
            reload: function () {
                var demoReload = $('#studentNumber');
                console.log("123")
                //执行重载
                table.reload('studentInfoList', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        key: {
                            id: demoReload.val()
                        }
                    }
                });
            }
        };

        //监听搜索
        form.on('submit(teacher-search)', function (data) {
            //执行重载
            table.reload('studentInfoList', {
                url: '/back/searchTeacher',
                method: 'post',
                page: {
                    curr: 1 //重新从第一页开始
                },
                where: {
                    jobNumber: data.field.jobNumber,
                    name: data.field.name
                }
            });
        });

        // 修改和删除等操作
        //监听行工具事件
        table.on('tool(studentInfo)', function (obj) {

            const data = obj.data;
            console.log(obj)
            const jobNumber = data.num;
            console.log("jobNumber: " + jobNumber)

            if (obj.event === 'del') {
                // 删除信息
                layer.confirm('真的要删除这一行么', function (index) {
                    $.ajax({
                        type: 'GET',
                        async: true,
                        url: "/back/delTeacher",
                        dataType: 'JSON',
                        data: {
                            jobNumber: jobNumber
                        },
                        success: function (res) {
                            if (res.code == 200) {
                                layer.msg(res.msg, {time: 1000, icon: 5})
                            } else {
                                layer.msg('删除成功', {
                                    time: 1000, icon: 6
                                })
                                location.reload()
                            }
                        },
                        error: function (data) {
                            layer.msg("删除时发生错误，请重试...", {time: 1000, icon: 7})
                            return false;
                        }
                    })
                    obj.del();
                    layer.close(index);
                });
            } else if (obj.event === 'edit') {
                //编辑信息
                layer.open({
                    type: 2, //可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                    title: '修改教师信息', //标题
                    maxmin: true,
                    shadeClose: true, //点击遮罩关闭
                    content: '/back/toEditTeacher/' + jobNumber,
                    area: screen() < 1 ? ['90%', '450px'] : ['760px', '450px'], //弹出框大小
                    btn: ['修改', '取消'],
                    yes: function (index, layero) {
                        const iframeWindow = window['layui-layer-iframe' + index],
                            submitID = 'submit',
                            submit = layero.find('iframe').contents().find('#' + submitID);

                        //监听提交
                        iframeWindow.layui.form.on('submit(' + submitID + ')', function (data) {
                            const field = data.field; //获取提交的字段
                            console.log("field=" + field)
                            console.log("trueBooks", field.trueBooks)

                            //子页面 复选框数据
                            const classes = $("#editPage").contents().find("#eleId");

                            //号码的正则表达式
                            let phonereg = /^1(3\d|4[5-9]|5[0-35-9]|6[2567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;
                            const phone = phonereg.test(field.phone);

                            if (!phone) {
                                alert("请输入正确手机号");
                            } else {
                                $.ajax({
                                    type: "POST",
                                    url: "/back/updateTeacher",
                                    dataType: 'JSON',
                                    async: false,
                                    data: field,
                                    success: function (res) {
                                        if (res.code === 200) {
                                            layer.msg(res.msg, {time: 1000, icon: 5})
                                        } else {
                                            layer.msg('修改成功', {
                                                icon: 6, time: 2000, end: function () {
                                                    const index = parent.layer.getFrameIndex(window.name);
                                                    parent.layer.close(index)
                                                }
                                            })
                                            table.reload('studentInfoList'); //数据刷新
                                            layer.close(index)
                                        }
                                    },
                                    error: function (data) {
                                        layer.msg("修改时发生错误，请重试...", {time: 1000, icon: 7})
                                    }
                                });
                            }

                        });
                        submit.trigger('click');
                    }
                })
            }
        })


        active = {
            add: function () {
                layer.open({
                    type: 2
                    , title: '添加授课老师'
                    , maxmin: true
                    , content: '/back/toAddTeacher'
                    , area: screen() < 1 ? ['90%', '460px'] : ['760px', '460px']
                    , btn: ['提交', '取消']
                    , yes: function (index, layero) {
                        const iframeWindow = window['layui-layer-iframe' + index]
                            , submitID = 'submit'
                            , submit = layero.find('iframe').contents().find('#' + submitID);

                        //监听提交
                        iframeWindow.layui.form.on('submit(' + submitID + ')', function (data) {
                            const field = data.field; //获取提交的字段
                            //号码的正则表达式
                            let phonereg = /^1(3\d|4[5-9]|5[0-35-9]|6[2567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;
                            const phone = phonereg.test(field.phone);

                            if (!phone) {
                                alert("请输入正确手机号");
                            } else if (field.sex !== "男" && field.sex !== "女") {
                                alert("性别只有男女呦~");
                            } else if (phone && (field.sex = "男" || field.sex === "女")) {
                                $.ajax({
                                    //几个参数需要注意一下
                                    type: "POST",
                                    url: "/back/AddTeacher",
                                    dataType: 'JSON',
                                    async: true,
                                    data: field,
                                    success: function (res) {
                                        if (res.code === 200) {
                                            layer.msg(res.msg, {time: 1000, icon: 5})
                                        } else {
                                            layer.msg('添加成功!', {
                                                icon: 6, time: 2000, end: function f() {
                                                    const index = parent.layer.getFrameIndex(window.name);
                                                    parent.layer.close(index)
                                                }
                                            })
                                        }
                                    },
                                    error: function (data) {
                                        layer.msg("提交时错误，请重试...", {time: 1000, icon: 7})
                                    }
                                });
                            }


                            table.reload('recruitmentTable'); //数据刷新
                            table.reload('recruitmentTable'); //数据刷新
                            layer.close(index); //关闭弹层
                        });
                        submit.trigger('click');
                    }
                });
            }
        };


        //判断浏览器大小方法
        function screen() {
            //获取当前窗口的宽度
            var width = $(window).width();
            if (width > 768) {
                return 1;   //小屏幕
            } else {
                return 0;   //超小屏幕
            }
        }

        $('.layui-btn.layuiadmin-btn-admin').on('click', function () {
            console.log("执行了吗a")
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

    });
</script>
</body>
</html>
